<template>
  <div>
    <div class="header">
      <h3><icon name="arrow-left" @click="fanhui" />返回</h3>
      <h3>我收藏的</h3>
      <h3>管理</h3>
    </div>
    <div class="nav">
      <tabs v-model:active="active">
        <tab title="全部宝贝">
          <swipe-cell
            style="margin: 10px"
            v-for="item in product"
            :key="item.id"
          >
            <card
              :price="item.goodsPrice"
              :title="item.name"
              :thumb="dalImg(item.imgs)"
            />
            <template #right>
              <Button
                square
                text="删除"
                @click="deleteHandel(item.id)"
                type="danger"
                class="delete-button"
              ></Button>
            </template>
          </swipe-cell>
          <div class="main" v-show="product.length == 0">
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.a81a79c9d9567ab5ed195ec92c5b071d?rik=E%2b8xWwhkGSRdvA&riu=http%3a%2f%2fahumoney.com%2fwp-content%2fuploads%2f2020%2f12%2f1608690669-67c9d3bed21ef51-300x212.jpg&ehk=vMzAqWisEnQ6fAxB4DeWxoU187rZ%2by34BESBCxuHbH4%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
              alt=""
            />
            <p>你还没有收藏的帖子，快去收藏吧！</p>
          </div>
        </tab>
        <tab title="帖子">
          <div class="main" >
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.a81a79c9d9567ab5ed195ec92c5b071d?rik=E%2b8xWwhkGSRdvA&riu=http%3a%2f%2fahumoney.com%2fwp-content%2fuploads%2f2020%2f12%2f1608690669-67c9d3bed21ef51-300x212.jpg&ehk=vMzAqWisEnQ6fAxB4DeWxoU187rZ%2by34BESBCxuHbH4%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
              alt=""
            />
            <p>哎，啥也没</p>
          </div></tab
        >
        <tab title="宝贝主题"
          ><div class="main">
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.a81a79c9d9567ab5ed195ec92c5b071d?rik=E%2b8xWwhkGSRdvA&riu=http%3a%2f%2fahumoney.com%2fwp-content%2fuploads%2f2020%2f12%2f1608690669-67c9d3bed21ef51-300x212.jpg&ehk=vMzAqWisEnQ6fAxB4DeWxoU187rZ%2by34BESBCxuHbH4%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
              alt=""
            />
            <p>别看了，真没！</p>
          </div></tab
        >
        <tab title="话题"
          ><div class="main">
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.a81a79c9d9567ab5ed195ec92c5b071d?rik=E%2b8xWwhkGSRdvA&riu=http%3a%2f%2fahumoney.com%2fwp-content%2fuploads%2f2020%2f12%2f1608690669-67c9d3bed21ef51-300x212.jpg&ehk=vMzAqWisEnQ6fAxB4DeWxoU187rZ%2by34BESBCxuHbH4%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
              alt=""
            />
            <p>就知道你不听</p>
          </div></tab>
        >
      </tabs>
    </div>
  </div>
</template>
<script setup>
import { Tab, Tabs, Icon, SwipeCell, Button, Card } from "vant";
import { shoucangAPI, deleteAPI } from "../services/shop";
import { ref } from "vue";
import { dalImg } from "../utils/tools";
import { useRouter } from "vue-router";
const router = useRouter();
const product = ref("");
const fanhui = () => {
  router.go(-1);
};
shoucangAPI().then((res) => {
  product.value = res.data;
  console.log(res);
});
const deleteHandel = (pid) => {
  deleteAPI(pid).then(() => {
    shoucangAPI().then((del) => {
      product.value = del.data;
    });
  });
};


</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.main img {
  width: 40%;
  margin: 30%;
}
.main p {
  text-align: center;
}
</style>
